Implementing Item Selection and Collection Interaction Events in iOS

Course: iOS App Development

Topic: Implementing Item Selection and Collection Interaction Events

Course Link: iOS App Development Training

Demo Link: Register for a Course Demo

JustAcademy Homepage: Visit JustAcademy

1. Introduction to Item Selection and Collection Interactions

Item selection and collection interaction events allow users to interact with data displayed in iOS applications. When a user taps a product card, selects a photo, highlights a collection item, or chooses multiple files, the application responds to the corresponding interaction event.

In UIKit, UICollectionView displays items in grids, horizontal carousels, and custom layouts. Its delegate provides methods for handling selection, deselection, highlighting, display events, and other interactions. Similarly, UITableView uses delegate methods to respond to row selection and editing actions.

Learning Objectives

• Understand item selection and deselection events.
• Configure and use UICollectionViewDelegate.
• Handle user taps with didSelectItemAt.
• Control selection behavior with delegate methods.
• Implement single and multiple item selection.
• Provide visual feedback for selected items.
• Handle context menus, long presses, and cell interaction events.
• Build an interactive collection view using Swift and UIKit.

2. Understanding UICollectionView Interaction Events

A collection view separates its data, layout, and user interaction behavior. The data source provides cells and item counts, the layout arranges those cells, and the delegate responds to user interactions.

3. What Is Item Selection?

Item selection occurs when a user chooses an item in a collection view. The selected item might represent a product, image, document, category, or media file.

Common responses to selection include:

• Opening a detail screen.
• Displaying an enlarged image.
• Adding a product to a selection list.
• Showing a checkmark or selected border.
• Updating a toolbar with available actions.
• Enabling buttons such as Delete, Share, or Continue.

Selection is not the same as highlighting. Highlighting is typically temporary visual feedback while the user touches or tracks an item. Selection represents the item's chosen state according to the collection view's selection configuration.

4. Understanding didSelectItemAt

The collectionView(_:didSelectItemAt:) delegate method is called when the user successfully selects an item. It provides the collection view and the selected item's index path.

func collectionView(
    _ collectionView: UICollectionView,
    didSelectItemAt indexPath: IndexPath
) {
    print("Selected section: \(indexPath.section)")
    print("Selected item: \(indexPath.item)")
}

The indexPath.section value identifies the section, while indexPath.item identifies the item's position within that section.

Important Points

• Assign an object to the collection view's delegate property.
• Make sure the delegate object conforms to UICollectionViewDelegate.
• Confirm that selection is enabled for the intended interaction.
• Use the current data model to resolve the selected item.
• Do not treat an index path as a permanent identifier because items can move after data changes.

5. Setting Up a Basic Collection View

The following example creates a collection view displaying a set of product names. Selecting a product displays its name in the console.

import UIKit

final class ProductCollectionViewController:
    UICollectionViewController {

    private let products = [
        "Laptop",
        "Phone",
        "Headphones",
        "Keyboard",
        "Camera",
        "Smartwatch"
    ]

    override func viewDidLoad() {
        super.viewDidLoad()

        title = "Products"
        collectionView.backgroundColor = .systemBackground

        collectionView.register(
            UICollectionViewCell.self,
            forCellWithReuseIdentifier: "ProductCell"
        )
    }

    override func collectionView(
        _ collectionView: UICollectionView,
        numberOfItemsInSection section: Int
    ) -> Int {
        return products.count
    }

    override func collectionView(
        _ collectionView: UICollectionView,
        cellForItemAt indexPath: IndexPath
    ) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(
            withReuseIdentifier: "ProductCell",
            for: indexPath
        )

        var content = UIListContentConfiguration.cell()
        content.text = products[indexPath.item]
        cell.contentConfiguration = content

        return cell
    }

    override func collectionView(
        _ collectionView: UICollectionView,
        didSelectItemAt indexPath: IndexPath
    ) {
        let selectedProduct = products[indexPath.item]
        print("Selected product: \(selectedProduct)")
    }
}

This controller assumes that a collection view controller is created with a valid layout. For a programmatically created collection view inside a regular UIViewController, assign the controller as the collection view's data source and delegate instead of overriding collection view controller methods.

6. Enabling and Disabling Selection

The allowsSelection property controls whether users can select items. It is enabled by default for a standard collection view, but setting it explicitly can make the intended behavior clearer.

collectionView.allowsSelection = true

To disable selection:

collectionView.allowsSelection = false

Disabling selection is appropriate when a collection is only for display or when actions are provided through separate controls. If items must remain interactive, use the delegate's selection methods to control which items can be selected.

7. Controlling Which Items Can Be Selected

The collectionView(_:shouldSelectItemAt:) method allows the delegate to approve or reject a selection before it happens.

func collectionView(
    _ collectionView: UICollectionView,
    shouldSelectItemAt indexPath: IndexPath
) -> Bool {
    // Example: prevent selecting the first item.
    return indexPath.item != 0
}

Use this method when selection depends on application rules. For example, a subscription screen may prevent unavailable plans from being selected, or a document picker may restrict selection to supported file types.

Using a Model-Based Rule

struct Product {
    let id: UUID
    let name: String
    let isAvailable: Bool
}

func collectionView(
    _ collectionView: UICollectionView,
    shouldSelectItemAt indexPath: IndexPath
) -> Bool {
    return products[indexPath.item].isAvailable
}

This example assumes products is an array of Product model objects. It allows selection only when the corresponding product is available.

8. Handling Deselection Events

Deselection occurs when a previously selected item becomes unselected. The delegate method collectionView(_:didDeselectItemAt:) can update the interface or the application's selection state.

func collectionView(
    _ collectionView: UICollectionView,
    didDeselectItemAt indexPath: IndexPath
) {
    print("Deselected item at: \(indexPath)")
}

The delegate can also decide whether an item may be deselected by implementing collectionView(_:shouldDeselectItemAt:).

func collectionView(
    _ collectionView: UICollectionView,
    shouldDeselectItemAt indexPath: IndexPath
) -> Bool {
    return true
}

Return false only when the application has a clear reason to prevent deselection. For example, a workflow might require at least one option to remain selected.

9. Implementing Single Selection

Single selection means that the user can select only one item at a time. When another item is selected, the previous selection is replaced according to the collection view's selection behavior.

collectionView.allowsSelection = true
collectionView.allowsMultipleSelection = false

Single selection is useful for category pickers, product options, preferred themes, and choosing one image to edit.

Example: Selecting a Category

private let categories = [
    "All",
    "Electronics",
    "Clothing",
    "Books"
]

func collectionView(
    _ collectionView: UICollectionView,
    didSelectItemAt indexPath: IndexPath
) {
    let category = categories[indexPath.item]
    print("Active category: \(category)")
    // Filter the displayed products using this category.
}

For a production implementation, update the underlying category state and refresh the displayed results. If the category is part of a filter interface, make the selected category visually obvious.

10. Implementing Multiple Selection

Multiple selection allows users to select several items at once. It is useful in photo pickers, file managers, shopping lists, and batch-action interfaces.

collectionView.allowsSelection = true
collectionView.allowsMultipleSelection = true

When multiple selection is enabled, the app can retrieve selected index paths using indexPathsForSelectedItems.

let selectedIndexPaths =
    collectionView.indexPathsForSelectedItems ?? []

for indexPath in selectedIndexPaths {
    print("Selected item: \(indexPath.item)")
}

Example: Collecting Selected Items

func selectedProductNames() -> [String] {
    let selectedPaths =
        collectionView.indexPathsForSelectedItems ?? []

    return selectedPaths.compactMap { indexPath in
        guard products.indices.contains(indexPath.item) else {
            return nil
        }

        return products[indexPath.item]
    }
}

This example assumes that products is an array of strings and that it corresponds to the collection view's current data source. With sections, filtered data, or diffable data sources, resolve selected identifiers from the appropriate model rather than assuming every item belongs to one flat array.

11. Tracking Multiple Selection Interaction

Collection views support delegate events for multiple selection gestures, including a two-finger pan gesture where supported by the collection view configuration and platform.

• collectionView(_:shouldBeginMultipleSelectionInteractionAt:) — determines whether the gesture may begin.
• collectionView(_:didBeginMultipleSelectionInteractionAt:) — reports that the multiple-selection interaction began.
• collectionViewDidEndMultipleSelectionInteraction(_:) — reports that the interaction ended.

func collectionView(
    _ collectionView: UICollectionView,
    shouldBeginMultipleSelectionInteractionAt indexPath: IndexPath
) -> Bool {
    return true
}

func collectionView(
    _ collectionView: UICollectionView,
    didBeginMultipleSelectionInteractionAt indexPath: IndexPath
) {
    print("Multiple selection started")
}

func collectionViewDidEndMultipleSelectionInteraction(
    _ collectionView: UICollectionView
) {
    print("Multiple selection ended")
}

These events can be used to switch the interface into selection mode, show a Done button, or reveal bulk actions such as Share and Delete.

12. Providing Visual Feedback for Selected Items

Visual feedback helps users understand which items are selected. Examples include a checkmark, a border, a background change, or a selected-state icon.

For custom cells, override the selected-state behavior or update the cell when the selection changes. Avoid relying only on a temporary touch highlight to represent a persistent selection.

Example Custom Collection View Cell

import UIKit

final class SelectableProductCell: UICollectionViewCell {
    private let titleLabel = UILabel()
    private let selectionImage = UIImageView()

    override init(frame: CGRect) {
        super.init(frame: frame)

        titleLabel.textAlignment = .center
        titleLabel.numberOfLines = 0

        selectionImage.contentMode = .scaleAspectFit

        let stack = UIStackView(
            arrangedSubviews: [titleLabel, selectionImage]
        )
        stack.axis = .vertical
        stack.alignment = .center
        stack.spacing = 8
        stack.translatesAutoresizingMaskIntoConstraints = false

        contentView.addSubview(stack)

        NSLayoutConstraint.activate([
            stack.centerXAnchor.constraint(
                equalTo: contentView.centerXAnchor
            ),
            stack.centerYAnchor.constraint(
                equalTo: contentView.centerYAnchor
            ),
            stack.leadingAnchor.constraint(
                greaterThanOrEqualTo: contentView.leadingAnchor,
                constant: 8
            ),
            stack.trailingAnchor.constraint(
                lessThanOrEqualTo: contentView.trailingAnchor,
                constant: -8
            )
        ])

        contentView.layer.cornerRadius = 12
        contentView.layer.borderWidth = 1
        updateSelectionAppearance()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
    }

    override var isSelected: Bool {
        didSet {
            updateSelectionAppearance()
        }
    }

    func configure(title: String) {
        titleLabel.text = title
        updateSelectionAppearance()
    }

    private func updateSelectionAppearance() {
        contentView.backgroundColor = isSelected
            ? .systemBlue.withAlphaComponent(0.15)
            : .secondarySystemBackground

        contentView.layer.borderColor = isSelected
            ? UIColor.systemBlue.cgColor
            : UIColor.separator.cgColor

        selectionImage.image = isSelected
            ? UIImage(systemName: "checkmark.circle.fill")
            : nil

        selectionImage.tintColor = .systemBlue
        accessibilityValue = isSelected
            ? "Selected"
            : "Not selected"
    }
}

Register this custom cell with the collection view and configure it with the relevant product title. The cell updates its appearance whenever UIKit changes its selected state.

13. Understanding Highlighting Events

Highlighting provides immediate visual feedback while a user touches an item. The collection view delegate offers methods to control and respond to this behavior.

func collectionView(
    _ collectionView: UICollectionView,
    shouldHighlightItemAt indexPath: IndexPath
) -> Bool {
    return true
}

func collectionView(
    _ collectionView: UICollectionView,
    didHighlightItemAt indexPath: IndexPath
) {
    print("Item highlighted: \(indexPath.item)")
}

func collectionView(
    _ collectionView: UICollectionView,
    didUnhighlightItemAt indexPath: IndexPath
) {
    print("Item highlight ended: \(indexPath.item)")
}

Use highlighting for transient touch feedback. Keep persistent selection styling separate so the interface does not confuse a tap in progress with an item that remains selected.

14. Handling Item Display Events

Collection view delegate methods can notify the application when cells appear or disappear. These events can help manage visible-cell behavior, lightweight animations, or work tied to visibility.

• collectionView(_:willDisplay:forItemAt:) — called when a cell is about to appear.
• collectionView(_:didEndDisplaying:forItemAt:) — called when a cell has stopped being displayed.

func collectionView(
    _ collectionView: UICollectionView,
    willDisplay cell: UICollectionViewCell,
    forItemAt indexPath: IndexPath
) {
    cell.alpha = 1.0
}

func collectionView(
    _ collectionView: UICollectionView,
    didEndDisplaying cell: UICollectionViewCell,
    forItemAt indexPath: IndexPath
) {
    // Release temporary resources if appropriate.
}

Because cells are reused, do not attach long-lived business state exclusively to a cell instance. Store that state in your model or view controller and configure each cell from the current item.

15. Implementing Long Press and Context Menus

Long presses and context menus provide additional actions without requiring a separate toolbar for every item. They are useful for copying, sharing, deleting, or previewing content.

UIKit supports collection view context menus through delegate methods such as collectionView(_:contextMenuConfigurationForItemsAt:point:). Use the modern index-path-based or items-based API available in the deployment target; avoid older deprecated context-menu methods.

Example Context Menu

func collectionView(
    _ collectionView: UICollectionView,
    contextMenuConfigurationForItemsAt indexPaths: [IndexPath],
    point: CGPoint
) -> UIContextMenuConfiguration? {
    guard let indexPath = indexPaths.first,
          products.indices.contains(indexPath.item) else {
        return nil
    }

    let product = products[indexPath.item]

    return UIContextMenuConfiguration(
        identifier: nil,
        previewProvider: nil
    ) { _ in
        let details = UIAction(
            title: "View Details",
            image: UIImage(systemName: "info.circle")
        ) { _ in
            print("Show details for \(product)")
        }

        let share = UIAction(
            title: "Share",
            image: UIImage(systemName: "square.and.arrow.up")
        ) { _ in
            print("Share \(product)")
        }

        return UIMenu(children: [details, share])
    }
}

This example assumes products is an array of strings and the deployment target supports the shown context-menu API. In a production application, use the product's stable identifier when creating actions and present a real detail or share interface instead of printing to the console.

16. Handling Primary Actions

In supported UIKit environments, collection view delegate methods such as canPerformPrimaryActionForItemAt and performPrimaryActionForItemAt allow the app to distinguish a primary action from a change in selection.

func collectionView(
    _ collectionView: UICollectionView,
    canPerformPrimaryActionForItemAt indexPath: IndexPath
) -> Bool {
    return true
}

func collectionView(
    _ collectionView: UICollectionView,
    performPrimaryActionForItemAt indexPath: IndexPath
) {
    guard products.indices.contains(indexPath.item) else {
        return
    }

    let product = products[indexPath.item]
    print("Open product: \(product)")
}

These methods are useful when a primary action should open a detail view or another interface. Check availability and interaction behavior for your target platforms, especially if the app supports multiple selection or indirect input devices.

17. Integrating Selection with Navigation

One common interaction is opening a detail screen when a user selects a collection item. The selected model object or its stable identifier is passed to the destination view controller.

func collectionView(
    _ collectionView: UICollectionView,
    didSelectItemAt indexPath: IndexPath
) {
    guard products.indices.contains(indexPath.item) else {
        return
    }

    let selectedProduct = products[indexPath.item]

    let detailController = ProductDetailViewController()
    detailController.productName = selectedProduct

    navigationController?.pushViewController(
        detailController,
        animated: true
    )
}

This example assumes that ProductDetailViewController exists and has a productName property. In an application with model objects, pass the model or a stable ID rather than just the displayed name.

18. Understanding UITableView Selection Events

Table views use similar delegate methods for row selection. The primary callback is tableView(_:didSelectRowAt:), which receives the index path of the selected row.

func tableView(
    _ tableView: UITableView,
    didSelectRowAt indexPath: IndexPath
) {
    let selectedItem = items[indexPath.row]
    print("Selected row: \(selectedItem)")

    tableView.deselectRow(
        at: indexPath,
        animated: true
    )
}

When a selection navigates to another screen, apps commonly clear the temporary row selection when the user returns. For persistent choice lists, represent the chosen state with a checkmark or another explicit indicator.

19. Updating the Interface When Selection Changes

Selection may affect other interface elements, such as a title label, toolbar, action button, or selected-item counter. Update the interface when the selection changes so users can understand the current state.

func collectionView(
    _ collectionView: UICollectionView,
    didSelectItemAt indexPath: IndexPath
) {
    updateSelectionSummary()
}

func collectionView(
    _ collectionView: UICollectionView,
    didDeselectItemAt indexPath: IndexPath
) {
    updateSelectionSummary()
}

private func updateSelectionSummary() {
    let count =
        collectionView.indexPathsForSelectedItems?.count ?? 0

    navigationItem.prompt = "\(count) item(s) selected"
}

Make sure the collection view property is accessible to the methods and configured before these callbacks occur. For more complex screens, maintain selection state by stable identifiers and derive the toolbar state from that selection model.

20. Common Problems and Troubleshooting

21. Performance and Accessibility Best Practices

• Keep delegate callbacks short and avoid heavy synchronous processing.
• Use stable identifiers when items can be sorted, filtered, or removed.
• Keep model state separate from reusable cell state.
• Update selection summaries and action buttons whenever selection changes.
• Use meaningful accessibility labels for icon-only actions.
• Ensure selection is not communicated by color alone.
• Test with VoiceOver and different input methods.
• For large collections, use efficient cell configuration and appropriate data source update techniques.
• Provide a clear way to exit multiple-selection mode.

22. Practical Project: Interactive Product Gallery

Build a product gallery that allows users to select items and perform actions.

Functional Requirements

1. Display products in a collection view grid.
2. Open a product detail screen when an item is selected.
3. Show a visible selection indicator.
4. Support selecting multiple products.
5. Display the number of selected products.
6. Provide a context menu with View Details and Share actions.
7. Keep selection state correct when the collection changes.
8. Provide accessible labels and suitable visual feedback.

Suggested Implementation Steps

1. Create a product model with a unique ID, title, and availability state.
2. Configure the collection view and register a custom cell.
3. Implement the data source and delegate.
4. Enable single or multiple selection based on the required behavior.
5. Implement selection and deselection callbacks.
6. Update the selection indicator and toolbar.
7. Add context menus and navigation.
8. Test scrolling, item updates, and accessibility.

23. Interview Questions and Answers

Q1. What is UICollectionViewDelegate?

It is a UIKit protocol used to manage collection view interactions, including selection, deselection, highlighting, and display-related events.

Q2. What does didSelectItemAt do?

It notifies the delegate when the user successfully selects an item, providing its index path.

Q3. What is the difference between selection and highlighting?

Highlighting is typically temporary feedback during touch interaction, while selection represents an item's chosen state.

Q4. How do you enable multiple selection?

Set collectionView.allowsMultipleSelection = true and implement appropriate selection-state handling.

Q5. How can you prevent an item from being selected?

Implement collectionView(_:shouldSelectItemAt:) and return false when the item should not be selectable.

Q6. How do you find selected items?

Use indexPathsForSelectedItems and resolve the corresponding items from the current data source or model.

Q7. What is didDeselectItemAt used for?

It notifies the delegate that a selected item has been deselected, allowing the app to update its state or interface.

Q8. How can a context menu be added to a collection view?

Implement the appropriate context-menu configuration delegate method and return a configuration containing the actions available for the item.

Q9. Why should stable identifiers be used?

Index paths can change when items are inserted, deleted, or reordered. Stable identifiers help maintain correct selection and action behavior.

Q10. How should selected items be displayed accessibly?

Use clear visual feedback, accessible labels or values, sufficient contrast, and test the interface with VoiceOver. Do not rely only on color.

24. Practice Exercises

1. Create a collection view that displays a list of categories and handles selection.
2. Allow users to select several photos and display a selection counter.
3. Prevent unavailable products from being selected.
4. Add a checkmark to selected custom cells.
5. Implement deselection and update the selected-item summary.
6. Display a detail screen after selecting a product.
7. Add a context menu with Share and Delete actions.
8. Test selection behavior after sorting and filtering the collection.

25. Quick Revision Checklist

• UICollectionViewDelegate manages collection interactions.
• didSelectItemAt responds to a successful user selection.
• didDeselectItemAt responds to deselection.
• shouldSelectItemAt controls whether an item may be selected.
• allowsMultipleSelection enables multiple selected items.
• Highlighting and selection represent different states.
• Stable IDs help keep interactions correct when data changes.
• Context menus, display callbacks, and primary actions support richer interactions.
• Accessible visual feedback makes selection easier to understand.

26. Conclusion

Implementing item selection and collection interaction events is an essential part of building interactive UIKit applications. By using UICollectionViewDelegate, developers can respond to selection, deselection, highlighting, multiple-selection gestures, and context-menu actions. Combining these events with stable model identifiers, reusable cells, clear feedback, and accessibility practices produces collection views that are reliable and user-friendly.

Learn more through JustAcademy's iOS App Development Course, register for a course demo, or visit the JustAcademy homepage.